<template>
	<!-- 页面根容器 -->
	<view class="">
		<!-- 自定义搜索栏组件 -->
		<search-slot>
			<!-- 搜索栏左侧内容 -->
			<template #left>
				<view class="search-left text-center">
					<!-- 此处可添加具体内容 -->
				</view>
			</template>
			<!-- 搜索栏中间内容 -->
			<template #center>
				<view class="flex-1 search-center text-center">购物车</view>
			</template>
			<!-- 搜索栏右侧内容，点击切换编辑和完成状态 -->
			<template #right>
				<view class="search-right text-center change-pos" @click="changeEdit">
					<!-- 根据 isEdit 状态显示编辑或完成 -->
					<text v-if="isEdit">编辑</text>
					<text v-else>完成</text>
				</view>
			</template>
		</search-slot>
		<!-- 如果购物车为空，显示提示信息 -->
		<template v-if="isListShow">
			<view class="py-5 d-flex a-center j-center bg-white">
				<view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></view>
				<text class="text-light-muted mx-2">购物车还是为空</text>
				<view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">
					去逛逛
				</view>
			</view>
		</template>
		<!-- 如果购物车不为空，显示商品列表 -->
		<template v-else>
			<!-- 遍历商品列表，显示每个商品 -->
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item, index) in list" :key="index">
				<!-- 商品选择框，点击触发 selectItem 方法 -->
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80rpx;height: 80rpx;" @click="selectItem(index)">
					<!-- 根据商品的 checked 状态显示是否选中 -->
					<radio color="#FD6801" :checked="item.checked" />
				</label>
				<!-- 商品封面图片 -->
				<image :src="item.cover" mode="widthFix" style="height: 150rpx;width: 150rpx;"
					class="border border-light-secondary rounded p-2 flex-shrink">
				</image>
				<!-- 商品信息容器 -->
				<view class="flex-1 d-flex flex-column pl-2">
					<!-- 商品标题 -->
					<view class="text-dark" style="font-size: 35rpx;">
						{{ item.title }}
					</view>
					<!-- 商品规格描述 -->
					<view class="d-flex text-light-muted mb-1">
						<text class="my-1">
							{{ item.skusText }}
						</text>
					</view>
					<!-- 商品价格和数量选择框 -->
					<view class="mt-auto d-flex j-sb">
						<!-- 商品单价 -->
						<text slot="newprice" style="color: #f60;">￥{{ item.pprice }}</text>
						<!-- 商品数量选择框 -->
						<view class="a-self-end pr-2">
							<uni-number-box :min="item.min" :max="item.max" v-model="item.num"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 如果处于编辑状态，显示结算相关信息 -->
		<template v-if="isEdit">
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<!-- 全选框，点击触发 doSelectedAll 方法 -->
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelectedAll">
					<!-- 根据 checkedAll 状态显示是否全选，购物车为空时禁用 -->
					<radio color="#FD6801" :checked="checkedAll" :disabled="isListShow" />
				</label>
				<!-- 显示选中商品的总价 -->
				<view class="flex-1 d-flex a-center j-center font-md" style="background:#fff;">
					合计:
					<text slot="newprice" style="color: #f60;font-weight: 900;">{{ totalPrice }}</text>
				</view>
				<!-- 结算按钮 -->
				<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
					hover-class="main-bg-hover-color">
					结算
				</view>
			</view>
		</template>
		<!-- 如果处于非编辑状态，显示移入收藏和删除按钮 -->
		<template v-else>
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<!-- 全选框，点击触发 doSelectedAll 方法 -->
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelectedAll">
					<!-- 根据 checkedAll 状态显示是否全选，购物车为空时禁用 -->
					<radio color="#FD6801" :checked="checkedAll" :disabled="isListShow" />
				</label>
				<!-- 移入收藏按钮 -->
				<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
					移入收藏
				</view>
				<!-- 删除按钮，点击触发 delSelect 方法 -->
				<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
					hover-class="main-bg-hover-color" @click="delSelect">
					删除
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	// 从 vuex 中导入 mapState、mapMutations、mapActions 和 mapGetters 辅助函数
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		// 定义组件的数据
		data() {
			return {
				// 初始状态为编辑状态
				isEdit: true,
				// 移除注释可手动控制购物车是否为空
				// isListShow: false
			}
		},
		// 定义组件的方法
		methods: {
			// 映射 mutations 中的 selectItem 和 delSelect 方法
			...mapMutations(['selectItem', 'delSelect']),
			// 映射 actions 中的 doSelectedAll 方法
			...mapActions(['doSelectedAll']),
			// 切换编辑和完成状态的方法
			changeEdit() {
				this.isEdit = !this.isEdit
			}
		},
		// 定义组件的计算属性
		computed: {
			// 映射 state 中的购物车商品列表
			...mapState({
				list: state => state.cart.list
			}),
			// 映射 getters 中的 checkedAll、totalPrice 和 isListShow 计算属性
			...mapGetters(['checkedAll', 'totalPrice', 'isListShow'])
		},
	}
</script>

<style scoped>
	/* 搜索栏右侧按钮的样式 */
	.change-pos {
		position: absolute;
		height: 88rpx;
		line-height: 88rpx;
		right: 20rpx;
	}
</style>